<template>
	<div style="text-align: left;">
		<!-- 抽屉 -->
		<el-drawer :visible.sync="drawer" :direction="direction" size="30%">
			<el-form ref="form" label-width="100px">
				<div style="box-shadow: 0 10px 10px rgba(132, 172, 232, .12), 0 0 6px rgba(132, 172, 232, .04)">
					<el-row>
						<el-col :span="24">
							<h4>&nbsp;&nbsp;&nbsp;辅助信息：</h4>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="20" :offset="1">
							<el-form-item label="保修期:">
								<el-input v-model="warrantyPeriod"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="20" :offset="1">
							<el-form-item label="替代品名称:">
								<el-input v-model="nameOfSubstitutes"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="20" :offset="1">
							<el-form-item label="替代品编号:">
								<el-input v-model="substituteNumber"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="20" :offset="1">
							<el-form-item label="生命周期(年):">
								<el-input v-model="lifeCycle"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="20" :offset="1">
							<el-form-item label="单位:">
								<el-input v-model="unit"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="20" :offset="1">
							<el-form-item label="产品经理:">
								<el-input v-model="productManager"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="20" :offset="1">
							<el-form-item label="供应商集合:">
								<el-input v-model="supplierSet" type="textarea" :rows="2"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="20" :offset="1">
							<el-form-item label="产品描述:">
								<el-input v-model="productDescription" type="textarea" :rows="2"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</div>
			</el-form>
		</el-drawer>
		<!-- 变更模态框 -->
		<el-dialog title="产品档案登记复核" top="18px" :visible.sync="dialogVisible" width="80%">
			<span>
				<el-form ref="form">
					<div style="box-shadow: 0 10px 10px rgba(132, 172, 232, .12), 0 0 6px rgba(132, 172, 232, .04)">
						<el-row>
							<el-col :span="12">
								<h3>&nbsp;&nbsp;&nbsp;主信息：</h3>
							</el-col>
							<el-col :span="12">
								<h3>&nbsp;&nbsp;&nbsp;档案编号:{{fileNumber}}</h3>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="10" :offset="1">
								<el-form-item label="产品名称:" label-width="100px">
									<el-input v-model="productName" readonly="readonly"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="10" :offset="2">
								<el-form-item label="制造商:" label-width="100px">
									<el-input v-model='manufacturer'></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="8" :offset="1">
								<!-- 一级分类，进入页面时进行绑定 -->
								<el-form-item label="I级分类:" label-width="100px">
									<el-select v-model="proclassOne" clearable placeholder="请选择">
										<el-option v-for="proclass in proclassOnes" :key="proclass.id" :label="proclass.label" :value="proclass.id"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8" :offset="4">
								<!-- 二级分类，通过一级分类修改进行改变 -->
								<el-form-item label="II级分类:" label-width="100px">
									<el-select v-model="productTwo" clearable placeholder="请选择">
										<el-option v-for="productTwo in productTwos" :key="productTwo.id" :label="productTwo.label" :value="productTwo.id"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="10" :offset="1">
								<!-- 三级分类，进入页面时进行绑定 -->
								<el-form-item label="III级分类:" label-width="100px">
									<el-select v-model="productThree" clearable placeholder="请选择">
										<el-option v-for="productThree in productThrees" :key="productThree.id" :label="productThree.label" :value="productThree.id"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="6" :offset="2">
								<el-form-item label="产品简称:" label-width="100px">
									<el-input v-model="productReferredToAs"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="8" :offset="1">
								<!-- 用途类型，进入页面时进行绑定 -->
								<el-form-item label="用途类型:" label-width="100px">
									<el-input v-model="useTheType" readonly="readonly"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8" :offset="4">
								<!-- 档次级别，通过一级分类修改进行改变 -->
								<el-form-item label="档次级别:" prop="classLevel" label-width="110px">
									<el-select v-model="productFiles.classLevel" clearable placeholder="请选择">
										<el-option v-for="classLevel in classLevels" :key="classLevel.levelnum" :label="classLevel.levelName" :value="classLevel.levelnum"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="7" :offset="1">
								<el-form-item label="计量单位:" label-width="100px">
									<el-input v-model="unitOfMeasurement"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="7" :offset="5">
								<el-form-item label="计量值:" label-width="100px">
									<el-input v-model="variable"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="7" :offset="1">
								<el-form-item label="市场单价(元):" label-width="100px">
									<el-input v-model="theMarketPrice" readonly="readonly"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="7" :offset="5">
								<el-form-item label="计划成本单价:" label-width="100px">
									<el-input v-model="unitPriceOfPlannedCost" readonly="readonly"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="7" :offset="1">
								<el-form-item label="变更人:" label-width="100px">
									<el-input v-model="registrant"  readonly="readonly"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="7" :offset="5">
								<el-form-item label="变更时间:" label-width="100px">
									<span>{{nowTime}}</span>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="12" :offset="4">
								<el-button size="medium" type="info" @click="drawer = true">辅助信息</el-button>
							</el-col>
							<el-col :span="8" :ofset="12">
								<el-button size="medium" type="primary" @click="ProductChanges()">提交</el-button>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="12">
								&nbsp;
							</el-col>
						</el-row>
					</div>
				</el-form>
			</span>
		</el-dialog>
		<!-- 主题 -->
		<el-container>
			<el-header style="text-align: center;">
				<el-row>
					<el-col :span="24">
						<div class="reCheckProductSumClass">
							符合条件的产品档案总数 ：{{reCheckProductSum}}例
						</div>
					</el-col>
				</el-row>
			</el-header>
			<el-main style="height: 461px; overflow: hidden; background: white; border:1px solid white ; border-radius: 8px;">
				<el-row>
					<el-col :span="24">
						<template>
							<el-table :data="tableData" stripe style="width: 100%">
								<el-table-column prop="date" label="日期" width="180">
								</el-table-column>
								<el-table-column prop="name" label="姓名" width="180">
								</el-table-column>
								<el-table-column prop="address" label="地址">
								</el-table-column>
								<el-table-column fixed="right" label="操作" width="100">
									<template slot-scope="scope">
										<el-button @click="dialogVisible=true" type="primary" size="mini">变更</el-button>
									</template>
								</el-table-column>
							</el-table>
						</template>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<template>
							<!--@size-change：当条数发现改变时触发-->
							<!--@current-change：当页码发生改变时触发-->
							<el-pagination style="margin-top: 5px;" layout="sizes, prev, pager, next, jumper, ->, total" :total="total"
							 :page-size.sync="pageSize" :page-sizes="pageSizes" :current-page.sync="currentPage" :pager-count="pagerCount"
							 background @size-change="handleSizeChange" @current-change="handleCurrentChange">
							</el-pagination>
						</template>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {
		name: 'productFileEnquiry',
		data() {
			return {
				/* 需要变更产品的总数 */
				reCheckProductSum: 4,
				/* 模态框 */
				dialogVisible: false,
				/* 分页 */
				total: 500, //总条数
				pageSize: 5, //每页显示多少条
				pageSizes: [2, 3, 5, 7], //每页显示条数候选值
				currentPage: 1, //当前页
				pagerCount: 5, //最多显示的页码，多余的会折叠
				/* 从数据库中查询所有的一级分类 */
				proclassOnes: [{
					id: 1,
					label: '电子',
				}, {
					id: 2,
					label: '服饰',
				}],
				/* 拿到当前用户选择添加的一级分类 */
				proclassOne: '',
				/* 从数据库中根据一级分类查询二级分类 */
				productTwos: [{
					id: 1,
					label: '服饰',
				}, {
					id: 2,
					label: '啊啊',
				}],
				/* 拿到当前用户选择添加的二级分类 */
				productTwo: '',
				/* 从数据库中根据一级分类查询二级分类 */
				productThrees: [{
					id: 1,
					label: '安安',
				}, {
					id: 2,
					label: '方法',
				}],
				/* 拿到当前用户选择添加的二级分类 */
				productThree: '',
				/* 用途类型 */
				useTheTypes: '',
				/* 拿到当前用户选择的用途类型 */
				useTheType: '',
				/* 档次级别 */
				classLevels: [{
					id: 1,
					label: '高级',
				}, {
					id: 2,
					label: '中级',
				}, {
					id: 3,
					label: '低级',
				}],
				/* 拿到当前用户选择的档次级别 */
				classLevel: '',
				/* 当前时间 */
				nowTime: '',
				/* 抽屉 */
				drawer: false,
				direction: 'ltr',
				/* 保修期 */
				warrantyPeriod:'',
				/* 替代品名称 */
				nameOfSubstitutes:'',
				/* 替代品编号 */
				substituteNumber:'',
				/* 生命周期(年) */
				lifeCycle:'',
				/* 单位 */
				unit:'',
				/* 产品经理 */
				productManager:'',
				/* 产品描述 */
				productDescription:'',
				/* 产品名称 */
				productName:'',
				/* 制造商 */
				manufacturer:'',
				/* 产品简称 */
				productReferredToAs:'',
				/* 计量单位 */
				unitOfMeasurement:'',
				/* 计量值 */
				variable:'',
				/* 市场单价(元) */
				theMarketPrice:'',
				/* 登记人 */
				registrant:'',
				/* 计划成本单价 */
				unitPriceOfPlannedCost:'',
				/* 供应商集合 */
				supplierSet:'',
				/* 档案编号 */
				fileNumber:'',
				tableData: [{
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1517 弄'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1519 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}, {
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1517 弄'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1519 弄'
				}],
			}
		},
		methods: {
			/* 改变size[每页条数]调用方法*/
			handleSizeChange(size) {
				/* 只要改变马上调用分页查询 */
			},

			/* 改变page[当前页码]调用方法*/
			handleCurrentChange(page) {
				/* 只要改变马上调用分页查询 */
			},
			/* 产品变更方法 */
			ProductChanges() {
				/* 关闭模态框 */
				this.dialogVisible = false;
			}
		}
	}
</script>

<style scoped="scoped">
	.reCheckProductSumClass {
		font-size: 13px;
	}
	
	.el-header {
		background-color: #333333;
	}
</style>
